{% extends "admin/admin_base.html" %}
{% load static %}
{% block content-area %}

<div class="card">
  <header class="card-header">

      <div class="model__content">
        <h2><span>Label</span></h2>
      </div>
{#    <a href="#" class="card-header-icon" aria-label="more options">#}
{#      <span class="icon">#}
{#        <i class="fas fa-angle-down" aria-hidden="true"></i>#}
{#      </span>#}
{#    </a>#}
  </header>

  <div class="card-content model__content">
{#    <div class="has-text-right">#}
{#      <div class="field is-grouped is-grouped-multiline has-text-weight-bold pbrem075 is-horizontal bordered-row">#}
        <div class="field is-grouped is-grouped-multiline has-text-weight-bold pbrem075 is-horizontal bordered-row">

          <div class="column is-3 mb0">
            <label class="label mb0">Current Labels</label>
          </div>

        <div class="control columns is-6" v-for="label in labels">
          <div class="tags has-addons has-text-weight-bold">
            <span class="tag is-medium" v-bind:style="{ color: label.text_color, 'background-color': label.background_color }">
              <button class="delete is-small tweaked-margin" @click="removeLabel(label)"></button>
              [[ label.text ]]
            </span>
            <span class="tag is-medium"><kbd>[[ label.shortcut | simpleShortcut ]]</kbd></span>
          </div>
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <label class="label column is-3 mb0">Preview</label>
        <div class="control column is-6">
          <div class="tags has-addons has-text-weight-bold">
            <a class="tag is-medium" v-bind:style="{ color: textColor, backgroundColor: backgroundColor }">
              [[ labelText ]]
            </a>
            <span class="tag is-medium"><kbd>[[ combineKeys | simpleShortcut ]]</kbd></span>
          </div>
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <div class="column is-3 mb0">
          <label class="label mb0">Label Name</label>
{#          <p class="is-small has-text-grey">required</p>#}
        </div>
        <div class="control column is-6">
          <input class="input" type="text" placeholder="Text input" v-model="labelText">
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <div class="column is-3 mb0">
          <label class="label mb0">Shortcut Key</label>
{#          <p class="is-small has-text-grey">optional</p>#}
        </div>
        <div class="control column is-narrow">
          <div class="select">
            <select v-model="selectedKey">
              <option disabled value="">Please select one</option>
              {% for ch in 'abcdefghijklmnopqrstuvwxyz' %}
              <option>{{ ch }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="is-narrow">
          <input class="is-checkradio" type="checkbox" id="ctrl" value="ctrl" v-model="checkedKey">
          <label for="ctrl"><kbd>C: Ctrl</kbd></label>
        </div>
        <div class="is-narrow">
          <input class="is-checkradio" type="checkbox" id="shift" value="shift" v-model="checkedKey">
          <label for="shift"><kbd>S: Shift</kbd></label>
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <div class="column is-3 mb0">
          <label class="label mb0">Background Color</label>
{#          <p class="is-small has-text-grey">optional</p>#}
        </div>
        <div class="control column is-6">
          <input class="input" type="color" v-model="backgroundColor">
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <div class="column is-3 mb0">
          <label class="label mb0">Text Color</label>
{#          <p class="is-small has-text-grey">optional</p>#}
        </div>
        <div class="control column is-6">
          <input class="input" type="color" v-model="textColor">
        </div>
      </div>


        <div class="field is-grouped">
          <div class="control">
              <button class="btn btn--icon-disclosure" @click="addLabel()">Add label</button>
          </div>
{#          <div class="control">#}
{#              <button class="button is-text" @click="reset()">RESET</button>#}
{#          </div>#}
          <div class="control">
              <button class="btn btn--icon-disclosure" @click="reset()">Reset</button>
          </div>
      </div>

{#      <div class="field is-grouped">#}
{#        <div class="control">#}
{#          <button class="button is-primary" @click="addLabel()">Add label</button>#}
{#        </div>#}
{#        <div class="control">#}
{#          <button class="button is-text" @click="reset()">Reset</button>#}
{#        </div>#}
{#      </div>#}

{#    </div>#}
  </div>
</div>
{% endblock %}
{% block footer %}
<script src="{% static 'bundle/label.js' %}"></script>
{% endblock %}